<template>
	<view class="article_detail">
		<text class="title">{{article.title}}</text>
		<view class="info">
			<view>
				<text style="color: #366092;padding-right: 15rpx;">咚咚出版社</text>
				<text>{{article.createdTime | formatDate}}</text>
			</view>
			<text>阅读量：{{views}}</text>
		</view>
		<view class="illustration">
			<u-image mode="" width="100%" height="100rpx" src="../../static/img/article_illustration.png" :fade="true" duration="450" border-radius="10"></u-image>
		</view>
		<view class="content">
			<rich-text class='rich' :nodes="content"></rich-text>
		</view>
		<view class="end">
			<text style="color: #FA3534;padding-right: 10rpx;">|</text>
			<text style="color: #909399;">E N D</text>
			<text style="color: #000000;padding-left: 10rpx;">|</text>
		</view>
		<u-divider color="#d37f88" half-width="200" border-color="#f0a6ab">给文章点个赞呗</u-divider>
		<view class="like" @click="clickLike">
			<view >
				<image src="../../static/img/like.png" v-show="like" ></image>
				<image src="../../static/img/nolike.png" v-show="!like"></image>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				article:{},
				like: false,
				views:0,
				articleId:0,
				content:'',
				timer:null
			}
		},
		methods: {
			//点赞节流
			clickLike(){
				this.$u.throttle(this.toLike,1500)
			},
			async toLike(){
				
				//判断是否有登录
				if(!this.$u.utils.isLogin()){}// 如果没有登录先去登录
				else{
					
					
					this.like = !this.like
					// const res = await this.$u.api.LikeArticle(this.article.id,this.vuex_user.id)
					// console.log(res)
					// 点赞与取消点赞
					if(this.like){
						this.$u.toast("点赞成功")
					}else{
						this.$u.toast("取消点赞")
					}
					
					// 此处 因为是路由跳转  将文章id 变成 参数的值所以 要切割
					// console.log(this.article.article.split('=')[1])
					// console.log(this.vuex_user.id)
					// 请求点赞接口
					await this.$u.api.LikeArticle(this.article.id,this.vuex_user.id)
				}

			},
			
			async isLike(){
				const res = await this.$u.api.isLike(this.article.id,this.vuex_user.id)
				
				if(res != null){
					this.like = res
					
				}
				
			},

		},
		onReady(){
			//页面初次渲染的时候 开始计算访问量
			this.timer = setTimeout(()=>{
				this.$u.api.addViews(this.articleId)
				console.log("文章访问量+1")
				if(this.views){
					this.views++
				}
			},10000)
		},
		async onLoad(options){
			if(options['id']){
				this.articleId= options['id']
				this.views = 102
			}else{
				this.views = options.view
				// this.article = options
				
				this.articleId= options.article.split('=')[1]
				
				
			}
			//获取文章的详细内容
			const articleDetail = await this.$u.api.articleDetail(this.articleId)
			
			//将文章的内容赋值
			var richtext = articleDetail.content
			//正则表达式 修改图片样式
			const regex = new RegExp('<img', 'gi');
			this.content= richtext.replace(regex, `<img style="max-width: 100%;"`);
			
			this.article = articleDetail
			
			//如果用户登陆了  就判断是否给文章点过赞
			if(this.vuex_user.id) this.isLike()

			
			
		},
		onUnload(){
			if(this.timer){
				clearTimeout(this.timer)
				
				this.timer = null;
			}
			
		},

		
	}
</script>

<style lang="scss">

	.article_detail{
		font-size: 28rpx;
		padding: 0 20rpx;
		.illustration{
			padding: 40rpx 30rpx;
			
		}
		.title{
			text-align: left;
			font-weight: 550;
			font-size: 40rpx;
			width: 710rpx;
			display: block;
			margin: 30rpx 0;
		}
		.info{
			font-size: 25rpx;
			display: flex;
			justify-content: space-between;
		}
		.content{
			padding: 0 30rpx;
			
			
		}
		.end{
			text-align: center;
			font-size: 25rpx;
			font-weight: bolder;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			
		}
		.like{
			width: 100%;
			text-align: center;
			padding-top: 20rpx;
			padding-bottom: 100rpx;
			view{
				
				margin: 0 auto;
				width: 85rpx;
				height: 85rpx;
				background-color: #FFFFFF;
				border: 1px solid #f0a6ab;
				border-radius: 50%;
				image{
					padding-top: 13rpx;
					margin: 0 auto;
					width: 60rpx;
					height: 60rpx;
				}
			}
			
		}
	}
</style>
